﻿<!DOCTYPE html>
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>流程图DEMO</title>
<!--[if lt IE 9]>
<?import namespace="v" implementation="#default#VML" ?>
<![endif]-->
<link rel="stylesheet" href="../../../../layui/css/layui.css" media="all" />
<link rel="stylesheet" type="text/css" href="../codebase/fonts/iconflow.css" />
<link rel="stylesheet" type="text/css" href="../codebase/HccFlow.css" />
<link rel="stylesheet" type="text/css" href="default.css" />
<script type="text/javascript" src="child.js"></script>
<script type="text/javascript" src="../plugin/jquery.min.js"></script>
<script type="text/javascript" src="../../../../js/common.js"></script>
<script type="text/javascript" src="../codebase/HccFunc.js"></script>
<script type="text/javascript" src="../plugin/json2.js"></script>
<script type="text/javascript" src="../codebase/HccFlow.js"></script>
<script type="text/javascript" src="../codebase/HccFlow.color.js"></script>

<script type="text/javascript" src="../plugin/promise.min.js"></script>
<script type="text/javascript" src="../plugin/html2canvas.min.js"></script>
<!--[if lte IE 11]-->
<script type="text/javascript" src="../plugin/canvg.js"></script>
<!--[endif]-->
<script type="text/javascript" src="../codebase/HccFlow.export.js"></script>
<script type="text/javascript" src="../codebase/commont.js"></script>
<script type="text/javascript" src="../../../../layui/layui.js"></script>
</head>
<body style="background: #EEEEEE">
	<div id="currPage">
		<div id="hccflow" style="margin: 5px; float: left"></div>
		<div id="formDiv" style="border: #ccc 1px solid;border-radius: 4px;background:#fff;z-index: 9999; position: fixed ! important; top:5px;right: 5px;min-height:658px;">
			<form class="myForm" id="propertyParent">
				<div class="form_title">流程属性</div>
				<div class="form_content">
					<table>
						<tr>
							<td class="th">流程名称：</td>
							<td><input type="text" id="parent_flowName" />
						</tr>
						<tr>
							<td class="th">流程编码：</td>
							<td><input type="text" id="parent_flowCode" /></td>
						</tr>
						<tr>
							<td class="th">流程业务：</td>
							<td><input type="text" id="parent_flowTypeName" disabled="disabled" /></td>
						</tr>
						<tr>
							<td class="th">流程类型：</td>
							<td><input type="text" id="parent_flowAttributeName" disabled="disabled" /></td>
						</tr>
						<tr>
							<td class="th">归属机构：</td>
							<td><input type="text" id="parent_followOrgName" disabled="disabled" /></td>
						</tr>
						<tr>
							<td class="th">流程说明：</td>
							<td><textarea id="parent_flowRemarks" style="width: 212px; height: 200px;" /></textarea>
						</tr>
					</table>
				</div>
				<div class="form_btn_div hide">
					<input type="button" value="确定" onclick="saveParent()" />
				</div>
			</form>
			<form class="myForm hide" id="propertyForm">
				<div class="form_title basics">节点基础属性</div>
				<div class="form_content basics">
					<table>
						<tr>
							<td class="th">节点Id：</td>
							<td colspan="3"><input type="text" id="ele_id" disabled="disabled" /></td>
						</tr>
						<tr>
							<td class="th">节点名称：</td>
							<td colspan="3"><input type="text" id="ele_name" /></td>
						</tr>
						<tr class="hide">
							<td class="th">Type：</td>
							<td colspan="3"><input type="text" id="ele_type" disabled="disabled" /></td>
						</tr>
						<tr>
							<td class="th">节点类型：</td>
							<td colspan="3"><input type="text" id="ele_model" disabled="disabled" /></td>
						</tr>
						<tr>
							<td class="th">左边距：</td>
							<td><input type="text" id="ele_left" disabled="disabled" style="width: 70px;"/></td>
						<!-- </tr>
						<tr> -->
							<td class="th" style="width: 66px;">右边距：</td>
							<td><input type="text" id="ele_top" disabled="disabled" style="width: 70px;"/></td>
						</tr>
						<tr>
							<td class="th">宽度：</td>
							<td><input type="text" id="ele_width" disabled="disabled" style="width: 70px;"/></td>
						<!-- </tr>
						<tr> -->
							<td class="th" style="width: 66px;">高度：</td>
							<td><input type="text" id="ele_height" disabled="disabled" style="width: 70px;"/></td>
						</tr>
						<tr>
							<td class="th">开始节点：</td>
							<td><input type="text" id="ele_from" disabled="disabled" /></td>
						</tr>
						<tr>
							<td class="th">结束节点：</td>
							<td><input type="text" id="ele_to" disabled="disabled" /></td>
						</tr>
					</table>
				</div>
				<div class="form_title additional">节点附加属性</div>
				<div class="form_content additional">
					<table>
						<tr>
							<td class="th">节点规则：</td>
							<td>
								<span class="radspanJoint">&nbsp;<input type="radio" name="verifyJoint" value="0" class="ele_verifyJoint">
								&nbsp;其中一个通过进入下个节点</span>
							</td>
						</tr>
						<tr>
							<td class="th"></td>
							<td>
								<span class="radspanJoint">&nbsp;<input type="radio" name="verifyJoint" value="1" class="ele_verifyJoint">
								&nbsp;全部通过才会进入下个节点[会签]</span>
							</td>
						</tr>
						<tr class="hide" id="verifyJoint2Tr">
							<td class="th"></td>
							<td>
								<span class="radspanJoint">&nbsp;<input type="radio" name="verifyJoint" value="2" class="ele_verifyJoint">
								&nbsp;到了刊播日期过则过,不过则释放资源</span>
							</td>
						</tr>
						<tr>
							<td class="th">任务归属类型：</td>
							<td>
								<span class="radspan">&nbsp;<input type="radio" name="verifyType" value="3" class="ele_verifyType">&nbsp;用户</span>
								&nbsp;&nbsp;
								<span class="radspan">&nbsp;&nbsp; <input type="radio" name="verifyType" value="2" class="ele_verifyType">&nbsp;角色</span>
								&nbsp;&nbsp;
								<span class="radspan">&nbsp;&nbsp; <input type="radio" name="verifyType" value="1" class="ele_verifyType">&nbsp;机构</span>
							</td>
						</tr>
						<tr class="hide">
							<td class="th">任务归属ids：</td>
							<td><input type="text" id="ele_verifyModelIds" /></td>
						</tr>
						<tr>
							<td class="th">任务归属者：</td>
							<td><textarea id="ele_verifyModelNames" style="width: 212px; height: 161px;" readonly="readonly" /></textarea>
						</tr>
					</table>
				</div>
				<div class="form_btn_div hide">
					<input type="button" value="确定" onclick="saveEle()" id="btn_ele_type" />
				</div>
			</form>
		</div>
		<div id="subDiv" style="clear: both; text-align: center;">
			<input style="margin-top: 15px; width: 152px; height: 30px;background-color:#1AA094;border-radius:4px;color:white;" id="submit" type="button" value='保存流程设计' onclick="saveEnd()" />
		</div>
	</div>
<script type="text/javascript">
	var type = GetQueryString("type");//来源
	layui.use([ 'layer', 'laydate' ], function() {
		var layer = layui.layer;
		var laydate = layui.laydate;
		laydate.render({
			elem : '#beginTime'
		});
		laydate.render({
			elem : '#endTime'
		});
	});
	var flowId = GetQueryString("flowId");//流程id
	var status = GetQueryString("status");//视图状态0编辑 1查看 2流程走势图
	var property = {
		width : $(this).width()-350,
		height : $(this).height()-60, 
		/* width : "80%",
		height : "70%", */
		toolBtns : [ "start round mix", "end round mix", "task", /*"node" ,"chat","state","plug","join","fork","complex mix" */],
		haveHead : true,
		headLabel : true,
		headBtns : [ "save", "print" ],//如果haveHead=true，则定义HEAD区的按钮
		haveTool : true,
		haveGroup : true,
		useOperStack : true
	};
	var remark = {
		cursor : "选择指针",
		direct : "结点连线",
		start : "开始结点",
		end : "结束结点",
		task : "任务结点",
		/* node : "自动结点",
		chat:"决策结点",
		state:"状态结点",
		plug:"附加插件",
		fork:"分支结点",
		join:"联合结点",
		"complex mix":"复合结点", */
		group : "区域备注"
	};
	var hccflow;
	var mark;//最新选中的审核类型
	var markOld;//之前选中的审核类型
	$(document).ready(function() {
		$("#formDiv").css("height",property.height-2);
		loadJsonData();
		$('.myForm input,.myForm textarea').blur(function() {
			if(!$(this).hasClass("ele_verifyType") && !$(this).hasClass("ele_verifyJoint")){
				saveParent();
				saveEle();
			}
		});
		$('.radspan,#ele_verifyModelNames').bind('click', function() {
			if($(this).prop("tagName") == "SPAN"){
				$(this).find("input").prop('checked', true);
				mark = $(this).find("input").val();
			}
			var dt = {
				"mark" : mark,
				"markOld" : markOld,
				"ids" : $("#ele_verifyModelIds").val(),
				"names" : encodeTextAreaString($("#ele_verifyModelNames").val())
			};
			$("#ele_verifyModelIds,#ele_verifyModelNames").val("");
			if(mark != undefined){
				openIframe($(".ele_verifyType[type='radio']:checked").val(), dt);
			}
			saveEle();
		});
		$('.radspanJoint').bind('click', function() {
			if($(this).prop("tagName") == "SPAN"){
				$(this).find("input").prop('checked', true);
			}
			var verifyJoint = $(".ele_verifyJoint[type='radio']:checked").val();
			if(verifyJoint == 1){
				//询问框
				layer.confirm('会签需该节点所有任务归属对应人员全部同意', {btn: ['确定'],title: "请谨慎操作!"}, function(){
					saveEle();
					layer.msg('设置成功',{time: 500,icon: 1});
				});
			}else{
				//询问框
				layer.confirm('该节任务归属者任一用户同意则自动进入下一个任务节点', {btn: ['确定'],title: "提示!"}, function(){
					saveEle();
					layer.msg('设置成功',{time: 500,icon: 1});
				});
			}
		});
		
	});

	function loadJsonData() {
		$.ajax({
			type : 'get',
			url : urlRootPrefix + '/flows/map2/' + flowId + '/'+status,
			contentType : 'application/json',
			success : function(data) {
				if (data.statusCode == "0") {
					workDis(data.data);
				} else {
					layer.msg(data.msg);
					if(status == 2){
						$(".myForm").addClass("hide");
						$("#subDiv").hide();
					}
				}
			}
		});
	}
	function workDis(dataAjax) {
		if (dataAjax && dataAjax.flowAttribute == "1") {
			//remark.fork = "复合结点";
			//property.toolBtns = [ "start round mix", "end round mix", "task","fork" ]
		}
		if (status == 0) {
			hccflow = $.createHccFlow($("#hccflow"), property);
		} else if (status == 1) {
			property.headBtns = [ "print" ];
			property.toolBtns = [];
			property.haveGroup = false;
			hccflow = $.createHccFlow($("#hccflow"), property);
			$(".myForm input,.myForm select,.myForm textarea").attr("disabled","disabled");
			$('.radspan').unbind("click"); //移除click
			$("#subDiv,.HccFlow_tool_btn").hide();
			$(".myForm select").css("background-color", "rgb(235, 235, 228)");
			hccflow.$editable = true;
			hccflow.onItemRename = function(id, type) {
				return false
			}
			hccflow.onItemMove = function(id, type) {
				return false;
			};
		} else if (status == 2) {
			property.haveTool = false;
			property.headBtns = [ "print" ];
			hccflow = $.createHccFlow($("#hccflow"), property);
			$(".myForm").addClass("hide");
			$("#subDiv").hide();
		} else {
			property.haveTool = false;
			property.headBtns = [ "print" ];
			hccflow = $.createHccFlow($("#hccflow"), property);
			$(".myForm").addClass("hide");
			$("#subDiv").hide();
		}
		//设定左侧工具栏中每一种结点或按钮的说明文字
		hccflow.setNodeRemarks(remark);
		//删除某个节点
		hccflow.onItemDel = function(id, type) {
			return true;
			/* if (confirm("确定要删除该节点吗?")) {
				this.blurItem();
				$("#propertyForm").hide();
				$("#propertyParent").show();
				return true;
			} else {
				return false;
			} */
		}
		
		//加载JSON设计数据
		if (dataAjax) {
			//初始化数据
			$("#parent_flowCode").val(dataAjax.flowCode);
			$("#parent_flowTypeName").val(dataAjax.flowTypeName);
			$("#parent_flowAttributeName").val(dataAjax.flowAttributeName);
			$("#parent_followOrgName").val(dataAjax.followOrgName);
			$("#parent_flowRemarks").val(dataAjax.flowRemarks);
			$("#parent_flowName").val(dataAjax.flowName);
			hccflow.setTitle(dataAjax.flowName);
			if(dataAjax.flowData){
				hccflow.loadData(JSON.parse(dataAjax.flowData));
			}
		}
		//hccflow.loadData(jsondata);
		//初始化流程设置编辑栏中的name
		$("#parent_flowName").val(hccflow.$title);
		//某个节点选中事件
		hccflow.onItemFocus = function(id, model) {
			$("#propertyParent").hide();
			$("#propertyForm").show();
			var obj;
			$("#ele_model").val(model);
			$("#ele_id").val(id);
			if (model == "line") {
				obj = this.$lineData[id];
				$("#ele_type").val(obj.M);
				$("#ele_from,#ele_to").parent().parent().show();
				$("#ele_left,#ele_top,#ele_width,#ele_height").val("").parent().parent().hide();
				$("#ele_from").val(obj.from);
				$("#ele_to").val(obj.to);
				$(".additional").hide();
			} else if (model == "node") {
				obj = this.$nodeData[id];
				$("#ele_type").val(obj.type);
				$("#ele_left").val(obj.left);
				$("#ele_top").val(obj.top);
				$("#ele_width").val(obj.width);
				$("#ele_height").val(obj.height);
				$("#ele_left,#ele_top,#ele_width,#ele_height").parent().parent().show();
				$("#ele_from,#ele_to").val("").parent().parent().hide();
				$(".additional").show();
				if (obj.type == "end round mix" || obj.type == "start round mix") {
					$(".additional").hide();
				} else {
					//$("#ele_verifyType").val(obj.verifyType);
					$(".additional input:radio").removeAttr("checked");
					if (obj.verifyType != undefined) {
						$(".additional .ele_verifyType:radio[value='"+ obj.verifyType + "']").prop('checked', true);
						mark = obj.verifyType;
					} else {
						mark = 3;
						$(".additional .ele_verifyType:radio[value='3']").prop('checked', true);
					}
					markOld = mark;
					if(obj.type == "fork"){
						$("#verifyJoint2Tr").show();
					}else{
						$("#verifyJoint2Tr").hide();
					}
					if (obj.verifyJoint != undefined) {
						$(".additional .ele_verifyJoint:radio[value='"+ obj.verifyJoint + "']").prop('checked', true);
					}else{
						$(".additional .ele_verifyJoint:radio[value='0']").prop('checked', true);
					}
					$("#ele_verifyModelIds").val(obj.verifyModelIds);
					$("#ele_verifyModelNames").val(decodeTextAreaString(obj.verifyModelNames));
				}
			}
			$("#ele_name").val(obj.name);
			if (status == 1) {
				$(".rs_close,.HccFlow_line_oper,.b_x").hide();
			}
			return true;
		};
		//点击画布其他区域
		hccflow.onItemBlur = function(id, model) {
			$("#propertyForm").hide();
			$("#propertyParent").show();
			return true;
		};
		//导出为图片
		hccflow.onPrintClick = function() {
			hccflow.exportDiagram(hccflow.$title+"-"+$("#parent_flowTypeName").val()+"-"+$("#parent_followOrgName").val());
		}
		//流程完结保存
		hccflow.onBtnSaveClick = function() {
			saveEnd();
		}
		
		//alert(window.outerHeight);
		//hccflow.reinitSize(1380,document.body.clientHeight);
		//alert($(this).width()+","+$(this).height());
		//hccflow.reinitSize($(this).width() - 350 - 10, $(this).height() - 60);
		if(status == 2){
			$(".HccFlow_head").append('<span style="display: block;padding: 3px 0px 0px 0px;margin-right: 50px;float: right;">流程走势图</span>');
		}
		
		$(".HccFlow_item_chat").click(function(){
			$(".HccFlow_item_chat").css({"z-index":"auto","border":"0px"});
			$(this).css({"z-index":"999","border":"2px solid"});
		});
	}
	//保存-流程属性设置
	function saveParent() {
		hccflow.setTitle($("#parent_flowName").val());//保存流程名称
	}
	//保存-节点属性设置
	function saveEle() {
		var comp_model = $("#ele_model").val();//获取当前选中节点的类型
		var comp_id = $("#ele_id").val();
		var comp_type = $("#ele_type").val();
		if (comp_id) {
			var flowchartdata = hccflow.exportData();
			$.each(flowchartdata.nodes, function(i, n) {
				if (i == comp_id) {
					//将form表单信息更新到node节点事项各个属性中
					n['name'] = $("#ele_name").val();
					if (comp_model == "node" && comp_type != "end round mix" && comp_type != "start round mix") {
						n['verifyJoint'] = $('.ele_verifyJoint:radio:checked').val();
						n['verifyType'] = $('.ele_verifyType:radio:checked').val();
						n['verifyModelIds'] = $("#ele_verifyModelIds").val();
						n['verifyModelNames'] = encodeTextAreaString($("#ele_verifyModelNames").val());
					}
				}
				flowchartdata.nodes[i] = n;
			});
			sessionStorage.setItem("flowchartdata",JSON.stringify(flowchartdata));
			hccflow.clearData();
			hccflow.loadData(JSON.parse(sessionStorage.getItem("flowchartdata")));
		}
	}
	//流程完结保存
	function saveEnd() {
		var rdata = hccflow.exportData();//最终的数据
		$.ajax({
			type : 'PUT',
			url : urlRootPrefix + '/flows',
			contentType : 'application/json',
			data : JSON.stringify({
				"flowId" : flowId,
				"flowCode" : $("#parent_flowCode").val(),
				"flowName" : $("#parent_flowName").val(),
				"flowRemarks" : $("#parent_flowRemarks").val(),
				"flowData" : JSON.stringify(rdata)
			}),
			success : function(data) {
				if (data.statusCode == "0") {
					
					if (type == 0){
						//反馈给平台，嵌入该网页的来源
						window.parent.postMessage({
							cmd: 'closed',
							params: {
								success: true,
								data: '1'
							}
						}, '*');
					}else{
						var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
						parent.example.ajax.reload();
						parent.layer.close(index); //再执行关闭
					}
				} else {
					layer.msg(data.msg);
				}
			}
		});
	}
	function openIframe(verifyType, dt) {
		sessionStorage.setItem("dt", JSON.stringify(dt));
		var htmlUrl;
		var layTitle;
		area = [ '1280px', '650px' ];
		if (verifyType == 1) {
			htmlUrl = 'select/orgList.html';
			layTitle = '请为节点(' + $("#ele_name").val() + ')选择任务归属机构';
		} else if (verifyType == 2) {
			htmlUrl = 'select/roleList.html';
			layTitle = '请为节点(' + $("#ele_name").val() + ')选择任务归属角色';
		} else if (verifyType == 3) {
			htmlUrl = 'select/userList.html';
			layTitle = '请为节点(' + $("#ele_name").val() + ')选择任务归属用户';
		}
		layer.open({
			type : 2,
			title : layTitle,
			shadeClose : false,
			shade : 0.8,
			maxmin : false, //开启最大化最小化按钮
			area : area,
			content : htmlUrl+"?type="+type,
			btn : [ '确定', '取消' ],
			yes : function(index, layero) {
				//按钮【按钮一】的回调
				var body = layer.getChildFrame('body', index), iframeWin = window[layero.find('iframe')[0]['name']];
				dt = iframeWin.checkData();
				if(dt.ids == ''){
					layer.msg('必须选中一下才能保存,或者点击取消操作',{time: 2000,icon: 2});
				}else{
					$("#ele_verifyModelIds").val(dt.ids);
					$("#ele_verifyModelNames").val(decodeTextAreaString(dt.names));
					layer.close(index);
					mark = dt.mark;
					markOld = mark;
					saveEle();
				}
			},
			btn2 : function(index, layero) {
				var body = layer.getChildFrame('body', index), iframeWin = window[layero.find('iframe')[0]['name']];
				dt = iframeWin.checkDataCancel();
				if (mark != undefined && markOld != undefined) {
					$(".additional .ele_verifyType:radio[value='" + markOld + "']").prop('checked', true);
					$("#ele_verifyModelIds").val(dt.ids);
					$("#ele_verifyModelNames").val(decodeTextAreaString(dt.names));
					saveEle();
				}
			},
			cancel : function(index, layero) {
				var body = layer.getChildFrame('body', index), iframeWin = window[layero.find('iframe')[0]['name']];
				dt = iframeWin.checkDataCancel();
				if (mark != undefined && markOld != undefined) {
					$(".additional .ele_verifyType:radio[value='" + markOld + "']").prop('checked', true);
					$("#ele_verifyModelIds").val(dt.ids);
					$("#ele_verifyModelNames").val(decodeTextAreaString(dt.names));
					saveEle();
				}
			}
		});
	}
</script>
</body>
</html>
